<html>
    <head>
        <title>组件使用基本教程</title>
    </head>
    <body>
        <script>
              /*
                    一、组件使用入门教程

                                                    ①、 组件是视图层的基本组成单元。
                                                    ②、组件是一个单独且可复用的功能模块的封装。

                                                每个组件，包括如下几个部分： 

                                                    以组件名称为标记的 "开始标签" 和 "结束标签"、"组件内容"、"组件属性"、"组件属性值"。

                                                    ①、组件名称由尖括号包裹，称为标签，它有开始标签和结束标签。
                                                        
                                                            结束标签的<后面用/来表示结束。
                                                            
                                                                结束标签也称为闭合标签。
                                                                
                                                                如下面示例的<component-name>是开始标签，</component-name>是结束标签。

                                                    ②、在开始标签和结束标签之间，称为组件内容。如下面示例的content

                                                    ③、开始标签上可以写属性，属性可以有多个，多个属性之间用空格分割。如下面示例的property1和property2。注意闭合标签上不能写属性。

                                                    ③、每个属性通过=赋值。如下面的示例中，属性property1的值被设为字符串value。

                                                    ★、注意：  所有组件与属性名都是小写，单词之间以连字符-连接。

                                                    eg:

                                                        <component-name property1="value" property2="value">
                                                            content
                                                        </component-name>


                                                下面是一个基本组件的实例，在一个vue页面的根<view>组件下插入一个<button>组件。

                                                给这个组件的内容区写上文字“按钮”，同时给这个组件设置了一个属性“size”，并且“size”属性的值设为了“mini”。

                                                    ★、注意： 
                                                                按照vue单文件组件规范，每个vue文件的根节点必须为 <template>。
                                                                    
                                                                vue2下，这个 <template> 下只能且必须有一个根 <view> 组件。vue3不限制。

                                                    eg:
                                                        <template>
                                                            <view>
                                                                <button size="mini">按钮</button>
                                                            </view>
                                                        </template>


                            <1>、组件的属性类型

                                        组件的属性，有多种类型：

                                                    类型	        描述	            注解

                                                1、Boolean	        布尔值	            组件写上该属性，不管该属性等于什么，其值都为 true，
                                                                                        只有组件上没有写该属性时，属性值才为 false。
                                                                                        如果属性值为变量，变量的值会被转换为 Boolean 类型。
                                                
                                                2、Number	        数字	            1, 2.5
                                                
                                                3、String	        字符串	            "string"
                                                
                                                4、Array	        数组	            [ 1, "string" ]
                                                
                                                5、Object	        对象	            { key: value }
                                                
                                                6、EventHandler	    事件处理函数名	     handlerName 是 methods 中定义的事件处理函数名
                                                
                                                Any	任意属性	

                                        下面的例子演示了组件的属性设置 boolean 值  和数字的例子。

                                        注意 false 作为一个js变量，在组件的属性中使用时，属性前面需增加:冒号前缀，属性值仍使用引号包裹，但引号里不是字符串，而是js。

                                        eg:
                                            <template>
                                                <view>
                                                    <button size="mini" :disabled="false" hover-start-time=20 >按钮</button>
                                                </view>
                                            </template>


                           <2>、公共属性列表

                                                每个组件都有各自定义的属性，但所有 "uni-app"的组件，都有如下属性：


                                                    属性名	   类型	        描述	            注解

                                                    1、id	     String	    组件的唯一标示	    一般用于获取组件上下文对象（如：VideoContext），需要保持整个页面唯一
                                                    
                                                    2、ref	     String	    vue中组件的唯一标示	用来给子组件注册引用信息，详见 Vue 文档
                                                    
                                                    3、class	 String	    组件的样式类	    在对应的 css 中定义的样式类
                                                
                                                    4、style	 String	    组件的内联样式	    可以动态设置的内联样式
                                                    
                                                    5、hidden	 Boolean	组件是否隐藏	    所有组件默认是显示的
                                                    
                                                    6、data-*	 Any	    自定义属性	        组件上触发的事件时，会发送给事件处理函数
                                                    
                                                    7、@*	   EventHandler	组件的事件	        详见各组件详细文档，事件绑定参考 事件处理器


                                                除了上述公共属性，还有一类特殊属性以 "v-" 开头，称之为 vue 指令，如 v-if、v-else、v-for、v-model、v-slot 等

                                                详见： vue指令  https://uniapp.dcloud.net.cn/tutorial/vue-api#%e6%a8%a1%e6%9d%bf%e6%8c%87%e4%bb%a4


                           <3>、在组件中使用script的 data 变量

                                        组件中可以使用script的data中定义的变量，但组件的属性中使用和内容区使用的用法不一样。

                                           ①、在text内容区使用时，使用两个花括号来包裹，如下面的buttonText

                                           ②、在属性值中使用时，属性名的前面要加冒号前缀

                                        下面的button组件示例，等价于上一个的示例。只不过静态内容改成动态js。

                                        eg:
                                                <template>
                                                    <view>
                                                        <button size="mini" :disabled="buttondisble" hover-start-time=20 >{{buttonText}}</button>
                                                    </view>
                                                </template>
                                                <script>
                                                    export default {
                                                        data() {
                                                            return {
                                                                "buttonText":"按钮",
                                                                "buttondisble":false
                                                            }
                                                        }
                                                    }
                                                <//script> 


                           <4>、组件的事件

                                        每个组件都有“事件”。事件就是在指定的条件下触发某个js方法。

                                        比如button组件，有点击事件，也就是当手机用户点击这个button组件时，会触发这个事件。

                                        事件也是组件的属性，只不过这类属性以@为前缀。

                                        事件的属性值，指向一个在script的methods里定义过的js方法，还可以给方法传参数。

                                        下面是组件事件的示例：

                                            ①、click是button组件的点击事件，在用户点击这个button时触发

                                            ②、click指向了methods中定义的goto方法，并且传递了一个参数'/pages/about/about'

                                        eg:

                                            <template>
                                                <view>
                                                    <button size="mini" @click="goto('/pages/about/about')">按钮</button>
                                                </view>
                                            </template>
                                            <script>
                                                export default {
                                                    methods: {
                                                        goto(url) {
                                                            console.log("按钮被点击了，且传入的参数是：" + url)
                                                        }
                                                    }
                                                }
                                            <//script>
                                             
                */
        </script>
    </body>
</html>